<template>
  <div>
    <div class="cart_top">
      <div class="cart_wrapper">
        <div class="loginButton" @click="login" v-show="loginState == false">
          Login
        </div>
        <div class="loginButton" @click="loginOut" v-show="loginState">
          Logout
        </div>
        <button @click="gotoCart">购物车</button>
      </div>
      <el-dialog
        title="登陆"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-input v-model="name" placeholder="用户名"></el-input>
        <el-input v-model="pass" type="password" placeholder="密码"></el-input>
        <div class="button">
          <el-button type="primary" @click="loginStatus">登陆按钮</el-button>
        </div>
      </el-dialog>
    </div>
    <div class="sort_container">
      <div class="sort_wrapper">
        <div>Sort by:</div>
        <div>Default</div>
        <div>Price↑</div>
      </div>
    </div>
    <div class="cart_container">
      <el-row>
        <el-col :span="4">
          <h5>PRICE</h5>
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            @select="handleOpen"
          >
            <el-menu-item index="1">
              <span slot="title">All</span>
            </el-menu-item>
            <el-menu-item index="2">
              <span slot="title">0.00-100.00</span>
            </el-menu-item>
            <el-menu-item index="3">
              <span slot="title">100.00-500.00</span>
            </el-menu-item>
            <el-menu-item index="4">
              <span slot="title">1000.00-2000.00</span>
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20">
          <div class="box">
            <div class="store_box" ref="scroll_view">
              <div class="button_sort">
                <button @click="downPrice">由低到高</button>
                <button @click="onPrice">由高到低</button>
              </div>
              <div class="slide" v-for="(item, index) in listData" :key="index">
                <img :src="item.productImage" alt="" />
                <div class="store_title">{{ item.productName }}</div>
                <div class="Price">{{ item.salePrice }}</div>
                <button class="togoCart" @click="onClick(item)">
                  加入购物车
                </button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginState: false,
      dialogVisible: false,
      name: "",
      pass: "",
      dataAll: [],
      listData: [],
    };
  },

  methods: {
    login() {
      this.dialogVisible = true;
    },
    loginStatus() {
      console.log(1111);
      if (this.name == "" || this.pass == "") {
        alert("输入内容不能为空");
      } else {
        localStorage.setItem("login", this.name);
        this.loginState = true;
        this.dialogVisible = false;
      }
    },
    loginOut() {
      this.loginState = false;
      localStorage.removeItem("login");
    },
    handleClose(done) {
      console.log(done);
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      if (key == "1") {
        this.listData = [];
        this.listData = this.dataAll;
      } else if (key == "2") {
        this.listData = [];
        this.dataAll.forEach((element) => {
          if (element.salePrice < 100) {
            this.listData.push(element);
          }
        });
      } else if (key == "3") {
        this.listData = [];
        this.dataAll.forEach((element) => {
          if (element.salePrice >= 100 && element.salePrice < 500) {
            this.listData.push(element);
          }
        });
      } else if (key == "4") {
        this.listData = [];
        this.dataAll.forEach((element) => {
          if (element.salePrice >= 1000 && element.salePrice < 2000) {
            this.listData.push(element);
          }
        });
      }
    },
    gotoCart() {
      this.$router.push("/myCart");
    },
    onClick(item) {
      var loginSta = localStorage.getItem("login");
      if (loginSta) {
        this.$store.commit("onClick", item);
      } else {
        alert("请先登陆");
      }
    },
    downPrice() {
      this.dataAll.sort((a, b) => {
        // console.log(a,b);
        return a.salePrice - b.salePrice;
      });
    },
    onPrice() {
      this.dataAll.sort((a, b) => {
        // console.log(a, b);
        return b.salePrice - a.salePrice;
      });
    },
  },
  mounted() {
    var loginSta = localStorage.getItem("login");
    if (loginSta) {
      this.loginState = true;
    }
    this.$axios.get("data.json").then((res) => {
      this.dataAll = res.data.result.list;
      this.listData = this.dataAll;
    });
    console.log(this.dataAll.slice(2, 6));
    this.$refs.scroll_view.addEventListener("scroll", (event) => {
      var target = event.target;
      console.log(event);
      var clientHeight = document.documentElement.clientHeight;
      console.log(clientHeight);
      //可视区域高度
      var scrollHeight = target.scrollHeight;
      //滚动视图的高度
      var scrollTop = target.scrollTop;
      //获取滚动距离
      if (scrollHeight - scrollTop - clientHeight <= 100) {
        setTimeout(() => {
          this.$axios.get("data.json").then((res) => {
            this.dataAll = res.data.result.list;
            // console.log(this.dataAll.slice(2,6));
            var array = [1, 2, 3];
            this.listData.push(this.dataAll.slice(2, 6));
          });
        }, 1000);
      }
    });
  },
};
</script>

<style lang="scss">
.cart_top {
  width: 100%;
  height: 60px;
  background-color: yellowgreen;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .cart_wrapper {
    width: 130px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .loginButton {
      cursor: pointer;
    }
  }
}
.el-input {
  margin: 10px 0;
}
.button {
  width: 100%;
  text-align: center;
}
.sort_container {
  width: 90%;
  height: 40px;
  background-color: yellowgreen;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .sort_wrapper {
    width: 230px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
.el-row {
  width: 90%;
  margin: 0 auto;
  .el-col-20 {
    background-color: rgb(236, 236, 236);
    .box {
      width: 100%;
    }
  }
}
.store_box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 10px;
  box-sizing: border-box;
  overflow: scroll;
  .button_sort {
    width: 100%;
  }
}
.slide {
  width: 230px;
  height: 300px;
  background-color: white;
  margin-top: 10px;
  box-shadow: 0px 0px 20px red;
  img {
    width: 90%;
    height: 200px;
  }
  .store_title {
    width: 90%;
    font-size: 14px;
  }
  .Price {
    width: 90%;
    font-size: 14px;
    color: red;
  }
  .togoCart {
    width: 90%;
    height: 35px;
    border: 1px solid red;
    background-color: white;
  }
}
// @media screen and (max-width: 990px) {
//   .slide {
//     width: 220px;
//     height: 300px;
//     background-color: white;
//     margin-top: 10px;
//     flex-wrap: wrap;
//   }
// }
@media screen and (max-width: 1024px) {
  .slide {
    width: 100%;
    height: 110px;
    background-color: white;
    margin-top: 10px;
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    img {
      width: 80px;
      height: 80px;
    }
  }
  .el-col-4 {
    display: none;
  }
}
</style>
